import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
// import { useLanguage } from '@/stores'
import { useTranslation } from 'react-i18next'
import { Progress } from 'tdesign-react'
import moment from 'moment'
import './index.less'

const TaskPannel = () => {

  const { t } = useTranslation(['bugManager'])

  const navigate = useNavigate()

  const [data, setData] = useState({
    originalTaskNumber: 0,
    originalBugNumber: 3,
    originalStoryNumber: 0,
    taskNumber: 0,
    bugNumber: 2,
    storyNumber: 0,
  })

  useEffect(() => {

  }, [])

  const computedTaskProgress = () => {
    let originalNumber = data.originalTaskNumber + data.originalBugNumber + data.originalStoryNumber
    let currentNumber = data.taskNumber + data.bugNumber + data.storyNumber
    return Number(((1 - (currentNumber / originalNumber)) * 100).toFixed(2))
  }

  const toTaskPage = (type: string) => {
    return () => {
      navigate(`/home/${type}`)
    }
  }

  return <div className='task-pannel'>
    <div className='task-progress'>
      <div className='welcome'>{t('home.taskPannel.welcomeback')}霸哥！</div>
      <div className='task-progress-title'>{t('home.taskPannel.taskProgress')} {computedTaskProgress()}%</div>
      <div className='task-progress-content'>
        <Progress
          label
          percentage={computedTaskProgress()}
          theme='line'
        />
      </div>
    </div>
    <div className='task-number'>
      <div className='date-row'>
        <span className='date'>{moment().format('YYYY-MM-DD')}</span>
        <span className='date-desc'></span>
      </div>
      <div className='task-row'>
        <div className='my-task' onClick={toTaskPage('my-task')}>
          <div className='task-desc'>{t('home.taskPannel.myTask')}</div>
          <div className={`total-number${data.taskNumber === 0 ? ' zero' : ''}`}>{data.taskNumber || 0}</div>
        </div>
        <div className='my-bug' onClick={toTaskPage('my-bug')}>
          <div className='task-desc'>{t('home.taskPannel.myBug')}</div>
          <div className={`total-number${data.bugNumber === 0 ? ' zero' : ''}`}>{data.bugNumber || 0}</div>
        </div>
        <div className='my-story' onClick={toTaskPage('my-story')}>
          <div className='task-desc'>{t('home.taskPannel.myStory')}</div>
          <div className={`total-number${data.storyNumber === 0 ? ' zero' : ''}`}>{data.storyNumber || 0}</div>
        </div>
      </div>
    </div>
  </div>
}

export default TaskPannel
